<template>
  <div id="content">
    <div>
      <div class="content_left">
        <el-menu
            :default-active="newsIndex"
            class="el-menu-vertical-demo"
            @select="toggle_menu">
          <el-menu-item index="0">
            <img alt="" src="./image/weibo.png">
            <span slot="title">微博</span>
          </el-menu-item>
          <el-menu-item index="1">
            <img src="./image/zhihu.png" alt="">
            <span slot="title">知乎</span>
          </el-menu-item>
          <el-menu-item index="2">
            <img src="./image/weixin.png" alt="">
            <span slot="title">微信</span>
          </el-menu-item>
          <el-menu-item index="3">
            <img src="./image/baidu.png" alt="">
            <span slot="title">百度</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="content_right">
        <div>
          <div class="title">
            <img v-if="newsIndex==='1'" src="./image/weibo.png" alt="">
            <img v-if="newsIndex==='2'" src="./image/zhihu.png" alt="">
            <img v-if="newsIndex==='3'" src="./image/weixin.png" alt="">
            <img v-if="newsIndex==='4'" src="./image/baidu.png" alt="">
            <h2>{{ title }}-热搜榜</h2>
          </div>
          <div class="body">
            <ul>
              <li v-for="(item,index) in NewsDataIndex.data" :key="item.id">
                <div>
                  <span v-if="index===0" class="first">1</span>
                  <span v-else-if="index===1" class="second">2</span>
                  <span v-else-if="index===2" class="third">3</span>
                  <span v-else>{{ index + 1 }}</span>
                  <a :href="item.link" target="_blank">{{ item.title }}</a>
                </div>
                <span>{{ item.info }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState, mapActions} from "vuex";

export default {
  name: "News",
  data() {
    return {
      newsIndex: '0',// 新闻页菜单栏位置
      title: '微博',
    }
  },
  methods: {
    // 新闻页面切换菜单栏
    toggle_menu(index) {
      this.setNewsIndex(index)
      this.title = this.NewsDataIndex.title
    },
    ...mapMutations('News', ['setNewsIndex', 'setNewsIndex']),
    ...mapActions('News', ['getNewsData']),
    ...mapActions('Rotation', ['getRotation'])
  },
  mounted() {
    // 获取新闻数据
    this.getNewsData().then(value => {
      this.setNewsIndex(0)
    })
    // 获取轮播图信息
    this.getRotation({
      type: this.$route.meta.type
    })
  },
  // 组件内前置路由
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.setNewsIndex(0)
    })
  },
  computed: {
    ...mapState('News', ['NewsDataIndex'])
  }
}
</script>

<style scoped lang="less">
#content {
  width: 100%;
  display: flex;
  justify-content: center;


  > div {
    display: flex;
    width: 1200px;

    .content_left {
      width: 20%;
      height: 300px;

      > ul {
        width: 100%;

        .el-menu-item {
          display: flex;
          justify-content: center;
          align-items: center;


          img {
            height: 25px;
            border-radius: 5px;
            margin-right: 8px;
          }
        }
      }
    }

    .content_right {
      width: 80%;
      min-height: 600px;
      background-color: #ffffff;
      padding: 20px;

      .title {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #e2e2e2;

        h2 {
          font-size: 20px;
          font-weight: bold;
        }

        img {
          width: 35px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }

      .body {
        margin-top: 20px;

        li {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin: 10px 0;

          > div {
            display: flex;
            align-items: center;
            width: 80%;

            > a {
              color: black;
              display: block; /* 如果是行内元素要转换成块级元素 */
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            > span {
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 20px;
              width: 20px;
              border-radius: 5px;
              background-color: #e2e2e2;
              color: #333;
            }

            .first {
              background-color: #fe2d46;
              color: #ffdeff;
            }

            .second {
              background-color: #ff6600;
              color: #ffdeff;
            }

            .third {
              background-color: #faa90e;
              color: #ffdeff;
            }
          }
        }
      }
    }
  }
}
</style>